package mymyoux.graphics.controls
{
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	
	import mx.containers.HBox;
	import mx.containers.VBox;
	import mx.controls.Button;
	import mx.controls.ColorPicker;
	import mx.controls.TextArea;
	import mx.controls.TextInput;
	import mx.events.ColorPickerEvent;
	import mx.events.FlexEvent;
	
	import mymyoux.utils.Maths;
	import mymyoux.io.mserveur.MRoom;
	import mymyoux.io.mserveur.mcontactClasses.People;
	import mymyoux.io.mserveur.mcontactClasses.events.PeopleEvent;
	/**
	 * Boite de chat.
	 */
	public class Chat extends VBox
	{
		/**
		 * @private
		 */
		protected var _room:MRoom;
		/**
		 * Zone de texte où les messages sont créés.
		 */
		protected var _textInput:TextInput;
		/**
		 * Zone de texte où les messages sont affichés.
		 */
		protected var _textArea:TextArea;
		/**
		 * Bouton permettant l'envoie de message
		 */
		protected var _sendButton:Button;
		/**
		 * Permet de choisir la couleur de son texte
		 */
		protected var _colorPicker:ColorPicker;
		/**
		 * Crée une zone de Chat.
		 * @param room Salon par lequel transitent les messages.
		 */
		public function Chat(room:MRoom)
		{
			super();
			this.room=room;
			_textInput=new TextInput();
			_textArea=new TextArea();
			_sendButton=new Button();
			_colorPicker=new ColorPicker();
			var hbox:HBox=new HBox();
			addChild(_textArea);
			addChild(hbox);
			hbox.addChild(_colorPicker);
			hbox.addChild(_textInput);
			hbox.addChild(_sendButton);
			//addChild(_textInput);
			_textInput.percentWidth=100;
			_textArea.percentHeight=100;
			_textArea.percentWidth=100;
			hbox.percentWidth=100;
			_sendButton.label="Send";
			_sendButton.addEventListener(FlexEvent.BUTTON_DOWN,onButtonDown);
			_textInput.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown);
			_colorPicker.showTextField=false;
			_colorPicker.addEventListener(ColorPickerEvent.CHANGE,onColorChange);
		}
		/**
		 * Appelée lorsque l'utilisateur change sa couleur.
		 */
		protected function onColorChange(event:ColorPickerEvent):void
		{
			this.callLater(_textInput.setFocus);
		}
		/**
		 * Appelée lorsque l'utilisateur appuie sur Envoyer.
		 * La fonction send() est appelée.
		 * @param event Evenement dispatché.
		 * @see #send()
		 */
		protected function onButtonDown(event:FlexEvent):void
		{
			send();
		}
		/**
		 * Appelée lorsque l'utilisateur appuie sur une touche du clavier.
		 * S'il appuie sur entrée, send() est appelée.
		 * @param event Evenement dispatché.
		 * @see #send()
		 */
		protected function onKeyDown(event:KeyboardEvent):void
		{
			if(event.keyCode==Keyboard.ENTER)
			{
				send();
			}
		}
		/**
		 * Appelée lorsqu'un message est reçu.
		 * La fontion show() est appeéle.
		 * @param event Evenement dispatché.
		 */
		protected function onMessage(event:PeopleEvent):void
		{
			show(event.people,event.value);
		}
		/**
		 * Envoie le message à travers le serveur lié à sa couleur.
		 */
		protected function send():void
		{
			if(_textInput.text.length>0)
			{
				var objet:Object=new Object();
				objet.color=Maths.rgbToHex(_colorPicker.selectedColor);
				//objet.text=_textInput.text;
				objet.htmlText='<TEXTFORMAT LEADING="2"><FONT FACE="Verdana" SIZE="10" COLOR="#'+objet.color+'" LETTERSPACING="0" KERNING="0">'+_textInput.text+'</FONT></TEXTFORMAT>';
				room.sendAll(objet);
				_textInput.text="";
			}
			
		}
		/**
		 * Affiche un message venant d'être reçu.
		 * @param people Personne ayant envoyé le message.
		 * @param message Message sous la forme : <li>message.htmlText contient le texte html</li>
		 * <li>message.color contient la couleur du message.</li>
		 */
		protected function show(people:People,message:Object):void
		{
			try
			{
				if(message.hasOwnProperty("htmlText"))
				{
					_textArea.htmlText+='<P ALIGN="LEFT"><TEXTFORMAT LEADING="2"><FONT FACE="Verdana" SIZE="10" COLOR="#'+message.color+'" LETTERSPACING="0" KERNING="0"><B>'+people.login+" : "+'</B></FONT></TEXTFORMAT>'+message.htmlText+'</P>';
				}else
				{
					_textArea.text+="\n"+people.login+" : "+message.text;
				}
				
			}catch(error:Error)
			{
				trace(_textInput.htmlText);
			}
			this.callLater(scroll);	
		}
		/**
		 * Appelée pour scroller correctement la zone de chat.
		 */
		protected function scroll():void
		{
			_textArea.verticalScrollPosition=_textArea.maxVerticalScrollPosition;
		}
		/**
		 * Salon par lequel transitent les messages.
		 */
		public function get room():MRoom
		{
			return _room;
		}
		public function set room(value:MRoom):void
		{
			if(_room!=null)
			{
				_room.removeEventListener(PeopleEvent.PEOPLE_DATA,onMessage);
			}
			_room=value;
			_room.addEventListener(PeopleEvent.PEOPLE_DATA,onMessage);
		}
		
	}
}